<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./CSS/home.css">
</head>
<body>
    <div id="warp">
        <div class="header">
        <!-- 第一行图片及搜索内容 -->
        <div class="picture">
            <img src="./object-picture/socials/blogger-32x32.png" alt="">
            <img src="./object-picture/socials/delicious-32x32.png" alt="">
            <img src="./object-picture/socials/designfloat-32x32.png" alt="">
            <img src="./object-picture/socials/facebook-32x32.png" alt="">
            <img src="./object-picture/socials/heart-32x32.png" alt="">

            <div class="sousou">
                <div>
                        <button class="d1" type="submit">
                                <img src="./object-picture/button-search.png" alt="">
                        </button>
                    <input class="d2" type="text" value="Search...">
                </div>
            </div>
        </div>


        <!-- blog图片及导航栏 -->
        <div >
            <img  class="d3" src="./object-picture/9.png" alt="">
        </div>

        <div>
            <ul>
                <li><a href="#">Miss</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Ace</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
            </ul>
        </div>
    </div>


    <!-- 主体内容 -->
    <div class="main">
        <!-- 左边第一个框 -->
        <div class="first">
            <h2 class="f1">Lorem ipsum dolor sit amet consectetur <br> molestias nobis</h2>

            <div class="tu">
                <img class="tup" src="./object-picture/img2.jpg" alt="">
            </div>

            <div class="f2">
                <span>  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Nam illo eius autem molestias nobis omnis ullam dolorum,
                rerum voluptatibus. Nostrum, ducimus aliquid mollitia rerum
                perspiciatis non tempora exercitationem quibusdam quos?
                molestias nobis omnis ullam dolorum,
                rerum voluptatibus. Nostrum, ducimus aliquid mollitia rerum
                perspiciatis non tempora exercitationem quibusdam quos?
                Nostrum, ducimus aliquid mollitia rerum
                perspiciatis non tempora exercitationem quibusdam quos?
                molestias nobis omnis [...]
                </span>
            </div>

            <p class="by">
                <i style="color:gray">  By Admin on Decenmber 01,2012-
                    <span style="color:rgb(69, 212, 199)"> 01 Commnets</span>
                </i>
            </p>

        </div>

        <!-- 右边第一个框 -->
        <div class="about">

            <!-- 标题 -->
            <div class="pass">
                <h2>About home </h2>
            </div>


            <div class="thephone">
                <!-- 图片 -->
                <div class="zero">

                    <img src="./object-picture/zerotheme.jpg" alt="">

                </div>

                <!-- 内容 -->
                <p>voluptatibus. Nostrum, ducimus<span style="color:rgb(69, 212, 199)">king</span>.
                    aliquid mollitia rerum perspiciatis non tempora exercitationem quibusdam quos?molestias
                    nobis omnis ullam  dolorum, rerum voluptatibus. Nostrum, ducimus aliquid mollitia rerum
                    quibusdam quos?perspiciatis non tempora exercitatione
                </p>

            </div>


        </div>

        <!-- 右边第二个框 -->
        <div  class="imac">
            <div class="aimac">
                <h2>Miss Take</h2>
            </div>

            <div class="free">
                Free Html5 Templates
            </div>

            <div class="free">
                    Free Responsive Themes
            </div>

            <div class="free1">
                    Free Html5 and Css3 The mes
            </div>

            <div class="free1">
                    Free Responsive Html5 and Css3 Themes
            </div>

            <div class="free1">
                     Free Responsive Html5 and Css3 Themes Themes
            </div>

            <div class="free1">
                    Free Responsive Html5 and Css3 Themes  Html5
           </div>
        </div>


        <!-- 左边第二个框 -->
        <div class="first">
                <h2 class="f1">Lorem ipsum dolor sit amet consectetur <br> molestias nobis</h2>

                <div class="tu">
                    <img class="tup" src="./object-picture/img2.jpg" alt="">
                </div>

                <div class="f2">
                    <span>  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Nam illo eius autem molestias nobis omnis ullam dolorum,
                    rerum voluptatibus. Nostrum, ducimus aliquid mollitia rerum
                    perspiciatis non tempora exercitationem quibusdam quos?
                    molestias nobis omnis ullam dolorum,
                    rerum voluptatibus. Nostrum, ducimus aliquid mollitia rerum
                    perspiciatis non tempora exercitationem quibusdam quos?
                    Nostrum, ducimus aliquid mollitia rerum
                    perspiciatis non tempora exercitationem quibusdam quos?
                    molestias nobis omnis [...]
                    </span>
                </div>

                <p class="by">
                    <i style="color:gray">  By Admin on Decenmber 01,2012-
                        <span style="color:rgb(69, 212, 199)"> 01 Commnets</span>
                    </i>
                </p>

            </div>

            <!-- 右边第三个框 -->
        <div class="pass" >

            <div class="pass">
                <h2>About home</h2>
            </div>

            <div class="pass">
                <img  class="img4" src="./object-picture/img4.jpg" alt="">
                <span class="l1">Lorem ipsum dolor sit.  <br>  <i style="color:gray">November 11,2012</i> </span>

            </div>

            <div class="pass2">
                <img class="img5" src="./object-picture/img5.jpg" alt="">
                <span class="l2">Lorem ipsum dolor sit.  <br>  <i style="color:gray">November 11,2012</i></span>
            </div>

            <div class="pass3">
                <img class="img1" src="./object-picture/img1.jpg" alt="">
                <span class="l3">Lorem ipsum dolor sit.  <br>  <i style="color:gray">November 11,2012</i></span>
            </div>


        </div>


    </div>


    <!-- 清除浮动 -->
    <div class="clear"></div>

    <!-- 底部盒子 -->
    <div class="foot">
        <!-- 左边的盒子 -->
        <div class="left1">
            <h2 class="iMage">home Gallery </h2>
            <img class="i1" src="./object-picture/img1.jpg" alt="" width="130" height="100">
            <img class="i2" src="./object-picture/img2.jpg" alt="" width="130" height="100">
            <img class="i3" src="./object-picture/img3.jpg" alt="" width="130" height="100">
            <img class="i4" src="./object-picture/img4.jpg" alt="" width="130" height="100">
            <img class="i5" src="./object-picture/img5.jpg" alt="" width="130" height="100">
            <img class="i6" src="./object-picture/img1.jpg" alt="" width="130" height="100">
        </div>

        <!-- 中间的盒子 -->
        <div class="center1">
            <h2 class="pass11">Free Html5 Templates</h2>
            <img class="opz" src="./object-picture/zerotheme.jpg" alt="" width="120" height="120">

            <p class="fc"><u> Free Html5 Templates </u>created by King. You can use and modify the template for both personal
              and commercial use. You must keep all copyright information and credit links in the template
              and associated filles.Contact Us
            </p>
        </div>

        <!-- 右边的盒子 -->
        <div class="right">
            <h2 class="pass">King's home</h2>
            <p class="pw">
                 <br>
                    Praesent dapibus, neque id cursus
                    faucibus, tortor neque egestas
                    augue. <br> <br>
                    Website:bold.phpfamily.org <br>
                    + 1 (1 2 3) 444-5677 <br>
                    + 1 (1 2 3) 444-5678 <br>
                    Address: 123 TemplateAccess Rd1</p>

        </div>

    </div>



    <!-- 清除浮动 -->
    <div class="clear"></div>


    <!-- 尾部 -->
    <div class="wei" >Copright © 2019 - 孙建宇</div>
</div>
</body>
</html>
